<!doctype html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>Upload en JavaScript</title>
        <link type="text/css" rel="stylesheet" href="../css/bootstrap.min.css">
        <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
        <style type="text/css">
            #op{
                width:300px;
                height:300px;
                overflow:auto;
                background-color:rgba(221,214,221,0.3);
                border:1px dashed black;
            }
        </style>
    </head>
    <body>
        <!-- -->
        <form action="index.php" method="GET" enctype="multipart/form-data">
            <input type="file" id="file" onchange="startRead();"><br>
            <div id="op"></div>
        </form>
    </body>

    <script type="text/javascript">
        function startRead(evt) {
            var file = document.getElementById("file").files[0];
            if (file) {
                if (file.type.match("image.*")) {
                    getAsImage(file);
                    alert("Name: " + file.name + "\n" + "Last Modified Date :" + file.lastModifiedDate);
                }
                else {
                    getAsText(file);
                    alert("Name: " + file.name + "\n" + "Last Modified Date :" + file.lastModifiedDate);
                }
            }
            evt.stopPropagation();
            evt.preventDefault();
        }
        function getAsText(readFile) {
            var reader = new FileReader();
            reader.readAsText(readFile, "UTF-8");
            reader.onload = loaded;
        }
        function loaded(evt) {
            alert("File Loaded Successfully");
            var fileString = evt.target.result;
            $("#op").text(fileString);
        }
        function getAsImage(readFile) {
            var reader = new FileReader();
            reader.readAsDataURL(readFile);
            reader.onload = addImg;
        }
        function addImg(imgsrc) {
            var img = document.createElement("img");
            img.setAttribute("src", imgsrc.target.result);
            document.getElementById("op").insertBefore(img);
        }
    </script>

    <script type="text/javascript">
        if (window.File && window.FileReader && window.FileList && window.Blob) {
            //alert("File API supported.!");
        } else {
            alert("The File APIs are not fully supported in this browser.");
        }
    </script>
</html>